<template>
  <div
    id="popup"
    class="ol-popup"
    v-show="popupContent"
    :style="{ 'min-width': isObject ? '280px' : 'auto' }"
  >
    <div class="title" v-if="typeof popupContent == 'object'">
      <span v-if="popupContent.type == 'monitor'"
        >编号:{{ popupContent.编号 }}</span
      >
      <span v-else>事件详细信息</span>

      <a href="#" id="popup-closer" class="ol-popup-closer"></a>
    </div>

    <div id="popup-content">
      <div v-if="typeof popupContent !== 'object'">{{ popupContent }}</div>

      <!-- 普通用户事件显示信息 -->
      <table v-else-if="popupContent.type == 'common'">
        <tbody>
          <tr>
            <th scope="row">事件类型</th>
            <td>{{ popupContent.事件类型 }}</td>
          </tr>
          <tr>
            <th scope="row">发生时间</th>
            <td>{{ popupContent.发生时间 }}</td>
          </tr>
          <tr>
            <th scope="row">发生地点</th>
            <td>{{ popupContent.发生地点 }}</td>
          </tr>
          <tr>
            <th scope="row">处理状态</th>
            <td>
              {{
                popupContent.处理状态 == 1
                  ? '处理中'
                  : popupContent.处理状态 == 2
                  ? '已处理'
                  : '未处理'
              }}
            </td>
          </tr>
        </tbody>
      </table>

      <!-- 管理员/交管部门事件显示信息 -->
      <table
        v-else-if="
          popupContent.type == 'admin' || popupContent.type === 'traffic'
        "
      >
        <tbody>
          <tr>
            <th scope="row">事件等级</th>
            <td>{{ popupContent.事件等级 }}</td>
          </tr>
          <tr>
            <th scope="row">事件类型</th>
            <td>{{ popupContent.事件类型 }}</td>
          </tr>
          <tr>
            <th scope="row">事件编号</th>
            <td>{{ popupContent.事件编号 }}</td>
          </tr>
          <tr>
            <th scope="row">发生时间</th>
            <td>{{ popupContent.发生时间 }}</td>
          </tr>
          <tr>
            <th scope="row">发生地点</th>
            <td>{{ popupContent.发生地点 }}</td>
          </tr>
          <tr>
            <th scope="row">处理状态</th>
            <td>
              {{
                popupContent.处理状态 == 1
                  ? '处理中'
                  : popupContent.处理状态 == 2
                  ? '已处理'
                  : '未处理'
              }}
            </td>
          </tr>
          <tr>
            <th scope="row">车牌号</th>
            <td>{{ popupContent.车牌号 }}</td>
          </tr>
          <tr>
            <th scope="row">驾驶员</th>
            <td>{{ popupContent.驾驶员 }}</td>
          </tr>
        </tbody>
      </table>

      <!-- 监控显示信息 -->
      <table v-else-if="popupContent.type == 'monitor'">
        <tbody>
          <tr>
            <th scope="row">位置</th>
            <td>{{ popupContent.位置 }}</td>
          </tr>
          <tr>
            <td colspan="2">
              <video
                :src="popupContent.video"
                autoplay
                muted
                loop
                width="100%"
                height="100%"
              ></video>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useMapgisStore } from '@/stores/mapgis'

import { toRefs } from 'vue'

const { popupContent } = toRefs(useMapgisStore())

// 弹窗宽度
const isObject = ref(false)

watch(
  popupContent,
  (newVal) => {
    if (typeof newVal === 'object') {
      isObject.value = true
    } else {
      isObject.value = false
    }
  },
  { immediate: true }
)
</script>

<style scoped>
.title {
  width: 100%;
  padding: 10px;
  background-color: rgb(33, 150, 243);
  color: white;
  border-radius: 10px 10px 0 0;
  font-size: 14px;
}
.ol-popup {
  position: absolute;
  background-color: white;
  -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  padding-bottom: 10px;
  border-radius: 10px;
  border: 1px solid #ccc;
  bottom: 25px;
  left: -50px;
}

.ol-popup:after,
.ol-popup:before {
  top: 100%;
  border: solid transparent;
  content: ' ';
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.ol-popup:after {
  border-top-color: white;
  border-width: 10px;
  left: 48px;
  margin-left: -10px;
}

.ol-popup:before {
  border-top-color: #cccccc;
  border-width: 11px;
  left: 48px;
  margin-left: -11px;
}

.ol-popup-closer {
  text-decoration: none;
  position: absolute;
  top: 5px;
  right: 20px;
  opacity: 0.5;
}
.ol-popup-closer:after {
  content: '✖';
  font-size: 20px;
}
.ol-popup-closer:hover {
  opacity: 1;
}

#popup-content {
  margin: 10px;
  font-size: 14px;
  font-family: '微软雅黑';
}

table {
  border-collapse: collapse;
  width: 100%;
}

th[scope='row'],
td {
  border: 1px solid #000;
  padding: 8px;
  text-align: center;
}
</style>
